<template>
  <div class="content">
    <div class="fields">
      <div class="field" v-show="!offeredOrderId">
        <img src="../assets/login.svg" alt="">
        <input type="text" placeholder="输入账号" v-model="rawOrder">
      </div>
      <div class="field">
        <img src="../assets/key.svg" alt="">
        <input type="password" placeholder="输入密码" v-model="pwd">
      </div>
      <div class="warn">
        <span v-show="warn" v-text="warn"></span>
      </div>
      <div class="field btn" @click="bind">绑定</div>
    </div>    
  </div>
</template>

<script>
  import request from 'superagent'
  import c from '../configs'


  export default {
    name: 'Fields',
    props: ['offeredOrderId', 'account'],
    data: function () {
      return { pwd: '', rawOrder: '', warn: '' }
    },
    computed: {
      orderId() {
        if (this.offeredOrderId) {
          return this.account
        } else {
          return this.rawOrder
        }       
      }
    },
    methods: {
      bind: function() {
        var self = this        
        
        request       
          .post(c.ctx + '/wechat/user/login')
          .type('form')
          .send({username: self.orderId})
          .send({password: self.pwd})
          .send({mobileLogin: 1})
          .end(function(err, res) {           
            if (err || !res.ok) {
              // alert('服务器出错')              
              self.warn = '服务器出错, 请重新登陆'
            } else if (res.body.code == 101) {                            
              self.warn = '用户名或密码错误, 请重新登陆'
            } else if (res.body.code == 100) {              
              window.location = c.ctx + '/wechat/user/userOrdersList'
            } else if (res.body.code == 107) {              
              window.location = c.ctx + '/wechat/user/userLoginQrcodeSuccess'
            } else {
              
            }
          })
      }
    },
    mounted: function() {
      if (this.offeredOrderId) {
        this.orderId = this.offeredOrderId
      }
    }
  }
</script>
 
<style lang="less">
  @import "../styles/field.less";
  @start: #fda232;
  @end: #ebdb12;

    
  .fields {
    margin: 0 auto 0;
    .field {
      .field(); 
    }
    ::-webkit-input-placeholder {
      color:#aaa;
    }
    :-moz-placeholder {
      color:#aaa;
    }
　　 ::-moz-placeholder {
     color:#aaa;
    }
    :-ms-input-placeholder {
      color:#aaa;
    }
    .warn {
      position: relative;
      width: 290px;
      margin: 0 auto;
      span {
        position: absolute;
        top: -18px;
        left: 4px;
        color: red;
        font-size: 12px;
      }
    }
    .field.btn {
      display: block;
      text-align: center;
      font-size: 16px;
      line-height: 33px;
      letter-spacing: 3px;
      color: white;
      background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@start), to(@end));
    }
  } 
</style>
